<template>
  <div style="position: fixed;top: -2px;left:1400px;z-index:999" >
    <div class="dropdown">
      <el-image class="dropbtn" style="width: 50px; height: 50px;" :src="this.user.image" fit="fill" />
      <div class="dropdown-content">
        <a  @click="open">每日打卡</a>
        <a  @click="person">个人主页</a>
        <a @click="this.$router.push('/user-manage')" v-if="user.account === 'admin'">编辑账号</a>
        <a @click="this.$router.push('/userlimit')" v-if="user.account === 'admin'">权限管理</a>
        <a @click="this.$router.push('/home-page')">回到主页</a>
        <a @click="cancel">退出登录</a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dropbtn {
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<script>
import request from "@/Utils/request.js";
import {ElMessageBox} from "element-plus";

export default {
  name: 'UserMenu',
  data(){
    return{
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
    }
  },
  methods:{
    person(){
      const { href } = this.$router.resolve({
        path: '/PersonalHomepage'
      });
      window.open(href, '_blank');
    },
    checkButtonStatus(){
      const lastClickTime = localStorage.getItem(this.user.account);
      if(lastClickTime){
        const currentTime = new Date().getTime();
        //判断是否为同一天
        const lastClickDate = new Date(parseInt(lastClickTime)).toDateString();
        const currentDate = new Date(parseInt(currentTime)).toDateString();
        if (lastClickDate === currentDate) {
          this.isButtonDisabled = false;
        } else {
          // 如果是新的一天，恢复按钮并更新点击时间
          this.isButtonDisabled = true;
        }
      } else {
        // 如果没有记录点击时间，按钮可用
        this.isButtonDisabled = true;
      }
    },
    open() {
      if(this.isButtonDisabled === true){
        request.get('/api/wl/yan/ming').then(res=>{
          ElMessageBox.alert(res.data.msg,res.data.source);
          //设置点击时间为当前时间戳
          localStorage.setItem(this.user.account,new Date().getTime().toString());
        }).catch(error=>{
          console.log(error)
        })
      }else {
        this.$message.error("今日打卡已完成,请勿重复打卡")
      }
    },
    cancel(){
      localStorage.removeItem("user");
      localStorage.removeItem("usermsg");
      localStorage.removeItem("employeemsg");
      this.$router.push('/login');
      this.$message({
        message:'退出成功!',
        type:'success'
      })
    }
  },
  mounted() {
    this.checkButtonStatus();
    // 每分钟检查一次日期是否已经变更
    setInterval(() => {
      this.checkButtonStatus();
    }, 1000);
  }
}
</script>